<layout name="site" />
<style>
  .slide {
  	display:none;
  }
  .wheel-content {
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 20px;
    background: url(__STYLE__/Activity/Turntable/bg_desk.jpg) center repeat-y;
  }

  .cover {
    width: 240px;
    height: 260px;
    margin: 0 auto;
    position: relative;
    text-align: center;
  }
  
  #outer {
    width: 240px;
    max-width: 240px;
    height: 240px;
    margin: 0 auto;
    position: absolute;
    top: 10px;
  }
  
  #inner {
    width: 80px;
    max-width: 80px;
    height: 100px;
    margin: 0 auto;
    cursor: pointer;
    position: absolute;
    top: 70px;
    left: 80px;
  }
  
  #outer img, #inner img {
    width: 100%;
  }
  
  .info {
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    width: 290px;
    margin: 0 auto 10px;
    border-radius: 5px;
  }

  .content { background:#fef8b2; width:290px; margin:10px auto; padding:6px 0; border-radius:6px; box-shadow:0 2px 5px #555; color:#595959; }
  .content .title { width:114px; height:28px; line-height:28px; margin-left:-5px; background:url("__COMMON__/images/title-bg.png") no-repeat; text-align:center; color:#fff; font-size:1.5rem; }
  .content p { padding:0 15px; margin:5px 0; }
</style>

<div class="wheel-content">
  
  <section class="cover">
    <div id="outer" style="-webkit-transform: rotate(99deg);">
      <img src="__STYLE__/Activity/Turntable/wheel.png">
    </div>
    <div id="inner">
      <img src="__STYLE__/Activity/Turntable/needle.png">
    </div>
  </section>
  <section id="info" class="info">{$wheel['intro']}</section>
  
  <section class="content">
    <h3 class="title">活动说明</h3>
    <p>{$activity.intro}</p>
  </section>
  
  <section class="content">
    <h3 class="title">奖项设置</h3>
    <volist name="activity.prize_config" id="vo">
    <p><span>{$vo.title}</span>&nbsp;&nbsp;共<b>{$vo.total}</b>名&nbsp;&nbsp;奖品为<b>{$vo.prizeName}</b></p>
    </volist>
  </section>
  
  <section class="content">
    <h3 class="title">活动时间</h3>
    <p>开始时间：{$activity.begin_time|date='Y-m-d H:i', ###}</p>
    <p>结束时间：{$activity.end_time|date='Y-m-d H:i', ###}</p>
  </section>
  
</div>

<script type="text/javascript">
  
  (function(){
    
    //抽奖次数以及中奖信息
    var times = {$activity.remainTimes},  //还可转次数
        prize = {$activity.activityRecord.prize},  //中奖情况0,1,2,3.... 0表示未中奖
        prizeCn = "{$activity.activityRecord.title}",  //中奖的奖项名称
        enable = true;
    
    var totalDeg = 360 * 3 + 0;
    var steps = []; //步值
    // 不中奖的位置  transform:rotate(**deg) 位置信息即为rotate的角度
    var lostDeg = [39, 69, 99, 159, 189, 219, 279, 309, 339];
    // 中奖的位置
    var prizeDeg = [9, 129, 249];
    
    // 奖品
    var count = 0;
    var now = 0;
    var a = 0.02; //减速度
    var timer = null,
        running = false;
    var outter = document.getElementById ( "outer" ),
        inner = document.getElementById ( "inner" );
    var i = 10;
    
    // 提示信息
    function showInfo( info ) {
      document.getElementById( "info" ).innerHTML = info;
    };
    
    // 提示信息
    function showPrize( prize, times ) {
      var info;
      if ( prize > 0 ) {  //如果已经中奖
        info = "您已经抽中【" + prizeCn + "】，请去领奖。";
        //转至中奖位置
        outter.style.webkitTransform = "rotate(" + prizeDeg[prize-1] + "deg)";
        outter.style.MozTransform = "rotate(" + prizeDeg[prize-1] + "deg)";
        outter.style.MsTransform = "rotate(" + prizeDeg[prize-1] + "deg)";
        enable = false;
      } else {  //如果还没有中奖
        if ( times > 0 ) {
          info = "您今天还有&nbsp;" + times + "&nbsp;次抽奖机会，祝您好运！";
        } else {
          info = "您今天的抽奖次数已经用完。";
          enable = false;
        }
      };
      showInfo( info );
    };
    
    // 初始化信息
    showPrize( prize, times );
    
    // 转盘信息
    window.requestAnimFrame = (function(){
      return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(callback){
        window.setTimeout(callback, 20);
      };
    })();
    
    function countSteps() {
      var t = Math.sqrt( 2 * totalDeg / a );
      var v = a * t;
      for ( var i = 0; i < t; i++ ) {
        steps.push( ( 2 * v * i - a * i * i ) / 2 );
      };
      steps.push( totalDeg );
    };
    
    function step() {
      outter.style.webkitTransform = "rotate(" + steps[now++] + "deg)";
      outter.style.MozTransform = "rotate(" + steps[now++] + "deg)";
      if ( now < steps.length ) {
        requestAnimFrame( step );
      } else {
        setTimeout(function(){
          showPrize( prize, times );
          running = false;
        }, 200);
      }
    };
    
    function start( deg ) {
      deg = deg || lostDeg[ parseInt( lostDeg.length * Math.random() ) ];
      running = true;
      clearInterval( timer );
      totalDeg = 360 * 5 + deg;
      steps = [];
      now = 0;
      countSteps();
      requestAnimFrame( step );
    };
    
    window.start = start;
    
    inner.addEventListener( "click", turnTable, false );
    
    function turnTable () {
      if ( running || !enable ) { return; }
      
      running = true;
      
      showInfo( "正在抽奖……" );
      
      timer = setInterval(function () {
        i += 15;
        outter.style.WebkitTransform = "rotate(" + i + "deg)";
        outter.style.MozTransform = "rotate(" + i + "deg)";
        outter.style.MsTransform = "rotate(" + i + "deg)";
      }, 17);
      
      var id = {$activity.id},
          sid = {$sid};
          
      GH.ajax ( "__CONTROLLER__/savePost", { "id": id, "sid": sid}, function(data) {
        if ( !data.error ) {
          prize = data.prize;
          times = data.remainTimes;
          prizeCn = data.title || "";
          start( prizeDeg[prize - 1] );
        } else {
          prize = 0;
          start();
        }
        count++;
      });
    };    
  })();
</script>
